interface DynamicObject {
  [key: string]: any;
}

function filterMenuItems(items: DynamicObject) {
  // 使用 filter() 方法来过滤条目
  return items
    .filter((item: DynamicObject) => {
      // 检查 item.url 是否不以 http://, https://, 或者 :// 开头
      return !(
        item.url.startsWith('http://') ||
        item.url.startsWith('https://') ||
        item.url.startsWith('//')
      );
    })
    .map((item: DynamicObject) => {
      // 如果存在子条目，对这些子条目递归调用 filterMenuItems
      if (item.children) {
        return {
          ...item, // 复制当前条目的其他属性
          children: filterMenuItems(item.children) // 递归过滤子条目
        };
      }
      return item; // 如果没有子条目，直接返回当前条目
    });
}

const getName = function (item: DynamicObject) {
  if (item.filePathName) {
    return item.filePathName;
  } else {
    return item.url.replace('/', '');
  }
};

const getComponent = function (item: DynamicObject) {
  if (item.filePath) {
    return item.filePath;
  } else {
    return () => import(`@/views/${item.url.replace('/', '')}/index.vue`);
  }
};

const getChildItemName = function (parentIem: DynamicObject, childItem: DynamicObject) {
  if (childItem.filePathName) {
    return childItem.filePathName;
  } else {
    return `${parentIem.url.replace('/', '')}-${childItem.url.replace('/', '')}`;
  }
};

const getChildItemComponent = function (parentIem: DynamicObject, childItem: DynamicObject) {
  if (childItem.filePath) {
    return childItem.filePath;
  } else {
    return () =>
      import(
        `@/views/${parentIem.url.replace('/', '')}/${childItem.url.replace('/', '')}/index.vue`
      );
  }
};

const getThreeItemName = function (
  parentIem: DynamicObject,
  childItem: DynamicObject,
  threeItem: DynamicObject
) {
  if (threeItem.filePathName) {
    return threeItem.filePathName;
  } else {
    return `${parentIem.url.replace('/', '')}-${childItem.url.replace('/', '')}-${threeItem.url.replace('/', '')}`;
  }
};

const getThreeItemComponent = function (
  parentIem: DynamicObject,
  childItem: DynamicObject,
  threeItem: DynamicObject
) {
  if (threeItem.filePath) {
    return threeItem.filePath;
  } else {
    return () =>
      import(
        `@/views/${parentIem.url.replace('/', '')}/${childItem.url.replace('/', '')}/${threeItem.url.replace('/', '')}/index.vue`
      );
  }
};

//嵌套路由可以提供一个空的嵌套路径, 默认直接渲染
const getPath = (url: string, index: number) => {
  if (index === 0) {
    return '';
  } else {
    return url.replace('/', '');
  }
};

const createDynamicRoute = function (data: Array<DynamicObject>) {
  // 过滤掉外链url 避免生成路由
  const arr = filterMenuItems(data);
  const asyncRoutesChildren = arr.map((parentIem: DynamicObject) => {
    let route = {};
    const parentPath = parentIem.url ?? '';

    // 判断有没有二级菜单
    if (parentIem.children && parentIem.children.length > 0) {
      // 二级菜单循环
      const childrenRoute = parentIem.children.map(
        (childItem: DynamicObject, childIndex: number) => {
          // 判断有没有三级菜单
          if (childItem.children && childItem.children.length > 0) {
            // 三级菜单循环
            const threeRoute = childItem.children.map(
              (threeItem: DynamicObject, threeIndex: number) => {
                return {
                  path: getPath(threeItem.url, threeIndex),
                  name: getThreeItemName(parentIem, childItem, threeItem),
                  props: threeItem.props,
                  component: getThreeItemComponent(parentIem, childItem, threeItem),
                  meta: {
                    title: threeItem.name,
                    hidden: threeItem.hidden,
                    keepAlive: Boolean(threeItem.cached),
                    activeMenu: threeItem.activeMenu,
                    paramsTitle: threeItem.paramsTitle,
                    noTagsView: threeItem.noTagsView
                  }
                };
              }
            );

            // 返回三级菜单路由
            return {
              path: getPath(childItem.url, childIndex),
              name: `${parentPath.replace('/', '')}-${childItem.url.replace('/', '')}`,
              meta: {
                title: childItem.name,
                hidden: childItem.hidden,
                keepAlive: Boolean(childItem.cached),
                activeMenu: childItem.activeMenu
              },
              children: [...threeRoute]
            };
          } else {
            // 没有三级菜单 只有二级菜单的情况下
            return {
              path: getPath(childItem.url, childIndex),
              name: getChildItemName(parentIem, childItem),
              component: getChildItemComponent(parentIem, childItem),
              props: childItem.props,
              meta: {
                title: childItem.name,
                hidden: childItem.hidden,
                keepAlive: Boolean(childItem.cached),
                activeMenu: childItem.activeMenu,
                paramsTitle: childItem.paramsTitle,
                noTagsView: childItem.noTagsView
              }
            };
          }
        }
      );

      route = {
        path: parentPath,
        name: parentPath.replace('/', ''),
        children: [...childrenRoute],
        meta: {
          title: parentIem.name,
          hidden: parentIem.hidden,
          keepAlive: Boolean(parentIem.cached),
          activeMenu: parentIem.activeMenu
        }
      };
    } else {
      // 返回一级菜单 没有二级菜单的情况下
      route = {
        path: parentPath,
        name: getName(parentIem),
        component: getComponent(parentIem),
        props: parentIem.props,
        meta: {
          title: parentIem.name,
          hidden: parentIem.hidden,
          keepAlive: Boolean(parentIem.cached),
          paramsTitle: parentIem.paramsTitle,
          noTagsView: parentIem.noTagsView
        }
      };
    }
    return route;
  });
  return asyncRoutesChildren;
};

export default createDynamicRoute;
